<template>
  <div class="c_main">
    <!-- 搜索 -->
    <stopwatch-search />
    <!-- 列表 -->
    <stopwatch-list />
    <!-- 弹窗 -->
    <a-modal v-model:visible="dialog" destroy-on-close :width="710" :title="null" :footer="null">
      <detail-pages />
    </a-modal>

    <!-- 抽屉组件--新增码表 -->
    <a-drawer v-model:visible="drawer" :width="570" destroy-on-close placement="right" :body-style="{ padding: '24px 0px' }" :footer-style="{ textAlign: 'right' }">
      <add-stopwatch />
    </a-drawer>
  </div>
</template>
<script lang="ts" setup>
  import StopwatchList from './components/StopwatchList.vue';
  import StopwatchSearch from './components/StopwatchSearch.vue';
  import AddStopwatch from './components/AddStopwatch.vue';
  import DetailPages from './components/DetailPages.vue';
  import { getDetailHooks } from '@/hooks/CodeTablesHooks/getStopwatchDetailHooks';
  import { getListHooks } from '@/hooks/CodeTablesHooks/getstopwatchDataHooks';

  // 得到hooks里面的方法
  const { getData } = getListHooks();
  // 得到控制弹窗,抽屉的值
  const { dialog, drawer } = getDetailHooks();
  // 页面加载发送请求
  getData();
</script>

<style lang="less" scoped>
  .c_main {
    display: flex;
    flex-direction: column;
    min-width: 1040px;
    height: 100%;
  }
</style>
